<template>
    <div class="home_aside">
        <h2 class="fonts18 fontw500">招聘职位</h2>
        <div class="home_aside_padding">
            <el-input @blur="search" clearable v-model="state.ruleForm.searchValue" class="w-50 m-2" placeholder="搜索职位关键词"
                :prefix-icon="Search" />
        </div>
        <ul class="home_aside_ul" v-loading="loading">
            <li @click="asideClick(item)" :class="state.value == item.id ? 'home_aside_lis' : ''" class="home_aside_li"
                v-for="(item, index) in state.dataList" :key="index">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { positionListAlls } from "@/api/recruit/index"
import { Search } from '@element-plus/icons-vue'
import { reactive, ref, watch } from 'vue'
const emit = defineEmits(['asideClick'])
const loading = ref(false)
const state = reactive({
    inputValue: "",
    value: "" as any,
    ruleForm: {
        searchValue: "",
        statusLe: "",
        statusGe: ""
    } as any,
    dataList: [
        {
            id: 0,
            value: 0,
            label: "全部"
        }
    ]
})
const props = defineProps({
    asideData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    refresh: {
        type: Boolean,
        default: () => {
            return false
        }
    }
})
watch(() => props.refresh, (newValue: any) => {
    console.log("刷新", newValue,state.ruleForm);
    
    if(state.ruleForm.statusLe!=''){
        positionListAllApi()
    }
})
watch(() => props.asideData, (newValue: any) => {
    console.log("侧边栏刷新：",newValue);
    state.ruleForm.statusLe = newValue.statusGe
    state.ruleForm.statusGe = newValue.statusLe
    positionListAllApi()
})
const asideClick = (item) => {
    state.value = item.id
    sessionStorage.setItem("asideValue",`${state.value}`)
    emit('asideClick', state.value)
}
const search = () => {
    positionListAllApi()
}
const positionListAllApi = async () => {
    loading.value = true
    await positionListAlls(state.ruleForm).then(res => {
        console.log("全部职位", res);
        loading.value = false
        state.dataList = [
            {
                id: 0,
                value: 0,
                label: "全部"
            }
        ]
        res.data.forEach(element => {
            let obj = {
                id: element.id,
                value: element.number,
                label: element.positionName,
            }
            state.dataList[0].value = state.dataList[0].value + element.number
            state.dataList.push(obj)
        })
        console.log("侧边栏数据：",state.dataList);
        
        state.value = sessionStorage.getItem("asideValue")?sessionStorage.getItem("asideValue"):0
        let bool=false
        state.dataList.forEach(element=>{
            if(state.value!=0&&element.id==state.value){
                bool=true
            }
        })
        if(!bool){
            state.value=0
        }
        sessionStorage.setItem("asideValue",`${state.value}`)
        emit('asideClick',  state.dataList[0].id)
    })
}

</script>

<style lang="less" scoped>
.home_aside {
    width: 275px;

    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}

h2 {
    position: relative;
    margin: 0;
    margin-bottom: 16px;
    padding: 24px 24px 0px 24px;

    &::after {
        position: absolute;
        left: 0px;
        top: 24px;
        content: "";
        width: 8px;
        height: 24px;
        background: #2F6CBC;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
    }
}

.home_aside_padding {
    padding: 0 24px;
}

.home_aside_ul {
    padding: 0;
    min-height: 400px;
    max-height: 600px;

    .home_aside_li {
        list-style: none;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        background-color: #fff;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    .home_aside_lis {
        background: #2F6CBC;
        color: #FFFFFF;
    }
}
</style>